import React from 'react';
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coordinate,
  Label,
  Legend,
  Interval,
  Util,
} from 'bizcharts';
import data from '../../../../public/data';
const HouseActive = () => {
  return (
    <>
      <Chart
        height={800}
        appendPadding={[10, 10, 10, 10]}
        data={data.houseActiveData}
        autoFit
        defaultInteractions={[]}
      >
        <Axis
          name="name"
          grid={null}
          tickLine={null}
          label={{
            style: {
              fill: 'white', // 文本的颜色
            },
          }}
        />
        <Axis name="value" grid={null} label={null} />
        <Coordinate transpose />
        <Interval position="name*value" />
      </Chart>
      <p
        style={{
          fontSize: '16px',
          color: 'white',
          textIndent: '2em',
          marginTop: '20px',
          padding: '0 15px',
        }}
      >
        2021年，昆明主城区及呈贡区所有楼盘中成交面积占比位居前20的楼盘如列表所示。其中，
        {data.houseActiveData[data.houseActiveData.length - 1].name}
        楼盘的活跃度最高，全年成交面积占比最大。
      </p>
    </>
  );
};
export default HouseActive;
